<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item >餐品管理</el-breadcrumb-item>
      <el-breadcrumb-item >菜品管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!--餐品管理表格-->
    <el-card class="box-card" >
      <el-row :gutter="24">
        <el-col style="text-align: right">
          <el-button size="mini" @click="handleAdd">添加菜品</el-button>
        </el-col>
      </el-row>
      <el-row :gutter="24">
        <el-col>
          <el-table stripe border :data="foods" style="width: 100%">
            <el-table-column prop="title" label="名称" width="180">
            </el-table-column>
            <el-table-column prop="cateName" label="类别" width="180">

            </el-table-column>
            <el-table-column prop="description" label="详情">
            </el-table-column>
            <el-table-column prop="price" label="价格">
            </el-table-column>
            <el-table-column prop="totalSales" label="月销量">
            </el-table-column>
            <el-table-column prop="isDefault" label="操作" >
              <template slot-scope="scope">
                <el-tooltip :enterable="false" effect="dark" content="编辑" placement="top">
                  <el-button type="primary" @click="handleEdit(scope.$index, scope.row)" size="mini" icon="el-icon-edit"/>
                </el-tooltip>
                <el-tooltip :enterable="false" effect="dark" content="删除" placement="top">
                  <el-button type="danger" @click="handleDelete(scope.$index, scope.row)"
                             size="mini" icon="el-icon-delete"/>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-card>
    <!--新增餐品对话框-->
    <div>
      <el-dialog
          title="新增餐品"
          :visible.sync="dialogVisible1"
          width="30%"
          :before-close="handleClose">
        <el-form label-position="right"
                 label-width="80px"
                 :model="newFood"
                 :rules="rules"
                 ref="AddFoodRef">
          <el-form-item prop="title" label="餐品名称">
            <el-input v-model="newFood.title"></el-input>
          </el-form-item>
          <el-form-item prop="cateId" label="餐品类别" style="text-align: left">
            <el-select size="large" v-model="newFood.cateId"
                       placeholder="餐品类别">
              <el-option v-for="cate in cates" :label="cate.name" :key="cate.id" :value="cate.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="description" label="描述" >
            <el-input  v-model="newFood.description"></el-input>
          </el-form-item>
          <el-form-item prop="cover" label="图片">
            <el-row>
              <el-col :span="6">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="newFood.cover"
                    v-if="newFood.cover"
                    :preview-src-list="[newFood.cover]" class="avatar">
                </el-image>
              </el-col>
              <el-col :span="12"
                      style="text-align: left; position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);">
                <el-upload
                    class="avatar-uploader"
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="price" label="价格">
            <el-input v-model="newFood.price"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onAdd">添加餐品</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>

    <!--修改餐品对话框-->
    <div>
      <el-dialog
          title="修改餐品"
          :visible.sync="dialogVisible2"
          width="30%"
          :before-close="handleClose">
        <el-form label-position="right" label-width="80px"
                 :model="updateFood"
                 :rules="rules"
                 ref="updateFoodRef"
        >
          <el-form-item prop="title" label="餐品名称">
            <el-input v-model="updateFood.title"></el-input>
          </el-form-item>
          <el-form-item label="餐品类别" style="text-align: left">
            <el-select size="large" v-model="updateFood.cateId"
                       placeholder="餐品类别">
                <el-option v-for="cate in cates" :label="cate.name" :key="cate.id" :value="cate.id"></el-option>
            </el-select>

          </el-form-item>
          <el-form-item prop="description" label="描述">
            <el-input v-model="updateFood.description"></el-input>
          </el-form-item>
          <el-form-item prop="cover" label="图片">
            <el-row>
              <el-col :span="6">
                <el-image
                    style="width: 100px; height: 100px"
                    :src="updateFood.cover"
                    :preview-src-list="[updateFood.cover]" class="avatar">
                </el-image>
              </el-col>
              <el-col :span="12"
                      style="text-align: left; position: absolute;left: 60%;top: 50%;transform: translate(-50%, -50%);">
                <el-upload
                    action="#"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload">
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item prop="price" label="价格">
            <el-input   v-model="updateFood.price" ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onUpdate">修改餐品</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  name: "FoodManage",
  inject: ['reload'],
  data() {
    return {
      dialogVisible1: false,  //新增弹出框
      dialogVisible2: false,  //修改弹出框
      // 类别列表
      cates: [],
      // 餐品列表
      foods: [],
      // 新增类别信息
      newFood: {
        restaurantId: null,
        cateId: null,
        title: '',
        description: '',
        cover: '',
        price: null,
        addTime: null
      },
      //修改类别信息
      updateFood: {
        id: null,
        cateId: null,
        title: '',
        description: '',
        cover: '',
        price: null,
      },
      rules: {
        title: [{required: true, message: '餐品名称不能为空', trigger: 'blur'}],
        description: [{required: true, message: '描述不能为空', trigger: 'blur'}],
        cover: [{required: true, message: '图片不能为空', trigger: 'blur'}],
        price: [{required: true, message: '价格不能为空', trigger: 'blur'},
        ],
        cateId:[{required: true, message: '类型不能为空', trigger: 'blur'}]
      }
    }
  },
  // 初始化餐品和类别列表
  created() {
    this.$axios({method: "get", url: "/food/init", params: {rid: this.$store.getters.rid}})
        .then(response => {
          if (response.data.success) {
            this.foods = response.data.food_list;
            console.log(response.data.food_list)
            this.cates = response.data.cate_list;
          }

        })
        .catch(error => console.log(error));
  },
  methods: {
    // 关闭对话框
    handleClose(done) {
      done();
    },
    handleAdd: function () {
      this.dialogVisible1 = true;
    },
    //修改
    handleEdit(index, row) {
      this.updateFood.id = row.id;
      this.updateFood.cateId = row.cateId;
      this.updateFood.title = row.title;
      this.updateFood.description = row.description;
      this.updateFood.cover = row.cover;
      this.updateFood.price = row.price;
      this.dialogVisible2 = true;
    },
    //删除
    handleDelete(index, row) {
      this.$axios({method: "get", url: "/food/delete", params: {id: row.id}})
          .then(response => {
            this.reload();
          })
          .catch(error => console.log(error));
    },
    // 添加新餐品
    onAdd() {
      this.$refs.AddFoodRef.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post", url: "/food/newfood", data: {
              restaurantId: this.$store.getters.rid,
              cateId: this.newFood.cateId,
              title: this.newFood.title,
              description: this.newFood.description,
              cover: this.newFood.cover,
              price: Number.parseFloat(this.newFood.price),
              addTime: new Date().getTime()
            }
          }).then(response => {
            this.reload();
          }).catch(error => console.log(error));

        } else {
          return this.$message.error('信息需要填写完整！');
        }

      })
    },
    // 提交更新
    onUpdate() {
      this.$refs.updateFoodRef.validate((valid) => {
        if (valid) {
          this.$axios({
            method: "post",
            url: "/food/update",
            data: {
              id: this.updateFood.id,
              cateId: this.updateFood.cateId,
              title: this.updateFood.title,
              description: this.updateFood.description,
              cover: this.updateFood.cover,
              price: Number.parseFloat(this.updateFood.price)
            }
          })
              .then(response => {
                this.reload();
              })
              .catch(error => console.log(error));
        } else {
          return this.$message.error('信息需要填写完整！');
        }

      })

    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt50M = file.size / 1024 / 1024 < 50

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!');
      }
      if (!isLt50M) {
        this.$message.error('上传图片大小不能超过 50MB!');
      }

      let formData = new FormData();//文件转换
      formData.append("file", file);
      console.log(file)
      this.$axios.post('/main/addImg', formData, {"Content-Type": "multipart/form-data;charset=utf-8"})
          .then((res) => {
            this.newFood.cover = "http://localhost:8080/" + res.data;
            if (this.updateFood.id != '') {
              this.updateFood.cover = "http://localhost:8080/" + res.data;
            }
          }).catch((error) => {
        console.log(error)
      })
      return isJPG && isLt50M;
    }
  }
}
</script>

<style scoped>

</style>
